<template>
    <view class="container">
        <view class="list" :style='[listStyle]'>
            <view class="item c-flex_column c-align_center c-justify_center">
                <view class="card c-flex_1">
                    <single-choose-card v-if='isSingleChooseType(currentQuestion.questionTypeId)'
                        :currentQuestion='currentQuestion' :total='questionTotal' :index='currentIndex'
                        :articleId='unit.id' @next='next'></single-choose-card>
                    <cloze-card v-else-if="isClozeType(currentQuestion.questionTypeId)"
                        :currentQuestion='currentQuestion' :total='questionTotal' :index='currentIndex'
                        :articleId='unit.id' @next='next'></cloze-card>
                    <line-link-card v-else-if='isLineLinkType(currentQuestion.questionTypeId)'
                        :currentQuestion='currentQuestion' :total='questionTotal' :index='currentIndex'
                        :articleId='unit.id' @next='next'></line-link-card>
                </view>
            </view>
        </view>
        <question-result-pop ref='resultPop' @resultChange='answerResultChange' @start='start'></question-result-pop>
        <check-origin-button ref='checkOriginButton' :unit='unit'></check-origin-button>
    </view>
</template>

<script>
    import UnitDetailMixin from "../../mixins/unit-detail-mixin.js";
    import ContentMixin from "../../mixins/content-mixin.js";
    import QuestionResultPop from "../../components/question-result-pop.vue";
    import SingleChooseCard from "./components/single-choose.vue";
    import ClozeCard from "./components/cloze.vue";
    import LineLinkCard from "./components/line-link.vue";
    import CheckOriginButton from "./components/check-origin-button.vue"
    import {
        QUESTION_TYPE,
        getTestData,
        contatTestQuestionData
    } from "../../services/index.js"
    import {
        isNotEmpty
    } from "../../../../common/utils/util.js";
    import QuestionModel from "../../models/questionModel.js"
    export default {
        components: {
            QuestionResultPop,
            SingleChooseCard,
            ClozeCard,
            LineLinkCard,
            CheckOriginButton
        },
        mixins: [UnitDetailMixin, ContentMixin],
        data() {
            return {
                answerResult: null, // 答题结果

                questionList: [], // 题目列表
                currentIndex: -1, // 当前题目index

                listHeight: 0
            }
        },
        watch: {
            unit: function(n) {
                if (n) {
                    this.getTestQuestionData(n.id)
                    this.$refs.resultPop.showPop(true, 'test', n.id);
                }
            },
            answerResult: function(n) {
                if (n) {
                    this.currentIndex = n.list.length;
                } else {
                    this.currentIndex = 0;
                }
            },
            currentQuestion: function(n) {
                if (n && this.isClozeType(n.questionTypeId)) {
                    this.showCheckOriginButton(true, {
                        keyParagraph: n.subject
                    })
                } else {
                    this.showCheckOriginButton(false)
                }
            }
        },
        computed: {
            // 当前question
            currentQuestion: function(n) {
                let result;
                if (this.currentIndex != -1 && isNotEmpty(this.questionList)) {
                    result = this.questionList[this.currentIndex];
                }
                return result ? result : {}
            },
            // 列表样式
            listStyle: function() {
                return {
                    height: `${this.listHeight}px`
                }
            },
            // question 总数
            questionTotal: function() {
                return this.questionList ? this.questionList.length : 0
            },
            // 文章id
            articleId: function() {
                return this.unit ? this.unit.id : ""
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.getListHeight();
            })
        },
        methods: {
            // 显示checkOriginButton
            showCheckOriginButton(show, extraInfo) {
                let component = this.$refs.checkOriginButton
                if (component) {
                    component.showCheckOriginButton(show, extraInfo);
                }
            },
            // 判断 question 类型
            isSingleChooseType(type) {
                return type == QUESTION_TYPE.SINGLE_CHOOSE.value;
            },
            isClozeType(type) {
                return type == QUESTION_TYPE.CLOZE.value;
            },
            isLineLinkType(type) {
                return type == QUESTION_TYPE.LINE_LINK.value;
            },
            // 获取问题数据
            getTestQuestionData(id) {
                getTestData(id).then(res => {
                    this.questionList = contatTestQuestionData(res).map(item => {
                        return new QuestionModel(item)
                    });
                })
            },
            // 获取列表高度
            getListHeight() {
                const query = uni.createSelectorQuery().in(this);
                query.select("#bottom").boundingClientRect();
                query.exec(res => {
                    let result = uni.getSystemInfoSync().windowHeight;
                    res.forEach(item => {
                        if (item && item.height) {
                            result = result - item.height
                        }
                    })
                    this.listHeight = result;
                })
            },

            // result pop 获取 answerResult 回调
            answerResultChange(e) {
                this.answerResult = e.result;
            },
            start() {},
            // 答题完成，下一个
            next(e) {
                this.currentIndex++;
                if (e.finish) {
                    this.$refs.resultPop.showPop(true, 'word', this.unit.id);
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../styles/sub-page.scss";

    .container {
        margin: 0 30rpx;
    }

    .list {
        width: 100%;

        .item {
            width: 100%;
            height: 100%;

            .card {
                width: calc(100%);
                height: calc(100%);
            }
        }
    }
</style>